// import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'


// function App() {
//   return (
//     <div className="App">
//       <Customer />
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }

class HelloWorld extends Component {
  constructor(props) {
    super(props)
    console.log('HelloWorld instance init')
  }
  render() {
    console.log('HelloWorld instance render')
    return (
      <div>HelloWorld</div>
    )
  }
  componentDidMount() {
    console.log('HelloWorld DidMount!')
  }
  componentDidUpdate() {
    console.log('HelloWorld DidUpdate!')
  }
}


// function Customer(props) {
//   console.log('render Customer')
//   return (
//     <div>
//       <dir>Customer</dir>
//       <div>{props.children}</div>
//     </div>
//   )
// }
class Customer extends Component {
  constructor(props) {
    super(props)
    console.log('Customer instance init')
  }
  render() {
    console.log('Customer instance render')
    return (
      <div>
        <dir>Customer</dir>
        <div>{this.props.children}</div>
        {this.props.clone}
      </div>
    )
  }
  componentDidMount() {
    console.log('Customer DidMount!')
  }
}

class Custildren extends Component {
  constructor(props) {
    super(props)
    console.log('Custildren instance init')
  }
  render() {
    console.log('Custildren render');
    return (
      <div>Custildren {this.props.name}</div>
    )
  }
}

class Custildren1 extends Component {
  constructor(props) {
    super(props)
    console.log('Custildren1 instance init')
  }
  render() {
    console.log('Custildren1 render');
    return (
      <div>Custildren1 {this.props.name}</div>
    )
  }
  componentDidMount() {
    console.log('Custildren1 DidMount!')
  }
}

class Counter extends Component {
  constructor(props) {
    super(props)
    console.log('Counter1 instance init')
    this.state = {
      count: 0,
    }
    console.log(this)
  }
  componentDidMount() {
    console.log('Counter1 DidMount!')
  }
  componentWillUnmount() {
    console.log('Counter1 WillUnmount!')
  }
  render() {
    console.log(React.createElement('div', null, 'Hello World'))
    console.log('Counter1 instance render')
    return (
      <div>
        <div>Counter1</div>
        <div>Counter2</div>
        <div>Counter3</div>
      </div>
    )
  }
}
function FunComponent(props) {
  console.log('我是函数式组件')
  return ( <div>funComponent</div> );
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state= {
      count: 0,
    }
    console.log(this.render())
  }
  render() {
    let count = this.state.count
    let counter = null
    if(count % 2 === 0) {
      counter = <div><Counter/></div>
    }
    else {
      counter = <span><Counter/></span>
    }
    console.log(this)
    // debugger
    console.log(React.createElement('div', null, 'Hello World'))
    console.log(React.createElement(Counter, null))
    console.log(counter)
    console.log('app 1')
    console.log(<div className="App">
                  <FunComponent/>
                  <div>nihao</div>
                  {counter}
                  <button onClick={() => this.setState({count: ++count})}>
                    ++count
                    <span>xxxx</span>
                  </button>
                </div>
                )
  console.log('-------------')
    return (
      <div className="App">
        {/* <Customer key="CT" clone={<Custildren1/>}>
          <Custildren name={this.props.name}></Custildren>
        </Customer>
        <HelloWorld key="HW"/> */}
        <FunComponent/>
        <div>nihao</div>
        {counter}
        {/* {console.log('App 2 render')} */}
        <button onClick={() => this.setState({count: ++count})}>++count<span>xxxx</span></button>
      </div>
    )
  }
}



export default App;
